<template>
  <div class="parameter-field" :class="{ required: param.required, error: error }">
    <label class="param-label">
      {{ param.paramName }}
      <span v-if="param.unit" class="param-unit">({{ param.unit }})</span>
      <span v-if="param.required" class="required-mark">*</span>
      <el-tooltip v-if="param.paramType === 'calculation'" :content="param.calculationExpr" placement="top">
        <i class="el-icon-info calculation-indicator"></i>
      </el-tooltip>
    </label>
    
    <!-- 文本输入 -->
    <el-input
      v-if="param.dataType === 'text' && param.paramType === 'base'"
      v-model="localValue"
      :placeholder="param.placeholder"
      size="small"
      @input="handleInput"
      @blur="validateField"
    />
    
    <!-- 数字输入 -->
    <el-input-number
      v-else-if="param.dataType === 'number' && param.paramType === 'base'"
      v-model="localValue"
      :precision="param.precision"
      :min="param.validateRule.min"
      :max="param.validateRule.max"
      size="small"
      controls-position="right"
      @change="handleChange"
    />
    
    <!-- 计算参数（只读显示） -->
    <div v-else-if="param.paramType === 'calculation'" class="calculated-value">
      <span class="value-display">{{ formattedValue }}</span>
      <el-tag size="mini" type="success">计算值</el-tag>
    </div>
    
    <!-- 验证错误提示 -->
    <div v-if="error" class="error-message">
      <i class="el-icon-warning"></i>
      {{ error }}
    </div>
    
    <!-- 参数信息提示 -->
    <div v-if="showInfo" class="param-info">
      <span v-if="param.validateRule.min !== undefined" class="info-item">
        最小值: {{ param.validateRule.min }}
      </span>
      <span v-if="param.validateRule.max !== undefined" class="info-item">
        最大值: {{ param.validateRule.max }}
      </span>
      <span v-if="param.precision !== undefined" class="info-item">
        精度: {{ param.precision }} 位
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ParameterField',
  props: {
    param: {
      type: Object,
      required: true
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      localValue: this.value,
      error: '',
      touched: false
    }
  },
  computed: {
    formattedValue() {
      if (this.param.dataType === 'number' && this.param.precision !== undefined) {
        const numValue = Number(this.localValue)
        return isNaN(numValue) ? '-' : numValue.toFixed(this.param.precision)
      }
      return this.localValue || '-'
    },
    showInfo() {
      return this.param.validateRule.min !== undefined || 
             this.param.validateRule.max !== undefined ||
             this.param.precision !== undefined
    }
  },
  watch: {
    value(newVal) {
      this.localValue = newVal
    }
  },
  methods: {
    handleInput(value) {
      this.localValue = value
      this.touched = true
      this.validateField()
      this.$emit('change', {
        paramCode: this.param.paramCode,
        value: value
      })
    },
    
    handleChange(value) {
      this.localValue = value
      this.touched = true
      this.validateField()
      this.$emit('change', {
        paramCode: this.param.paramCode,
        value: value
      })
    },
    
    validateField() {
      this.error = ''
      
      if (!this.touched) return true
      
      const value = this.localValue
      
      // 必填验证
      if (this.param.required && (value === '' || value === null || value === undefined)) {
        this.error = this.param.validateRule.requiredMsg || '此字段为必填项'
        return false
      }
      
      // 数字范围验证
      if (this.param.dataType === 'number' && value !== '') {
        const numValue = Number(value)
        if (isNaN(numValue)) {
          this.error = '请输入有效的数字'
          return false
        }
        
        if (this.param.validateRule.min !== undefined && numValue < this.param.validateRule.min) {
          this.error = this.param.validateRule.rangeMsg || `数值不能小于 ${this.param.validateRule.min}`
          return false
        }
        
        if (this.param.validateRule.max !== undefined && numValue > this.param.validateRule.max) {
          this.error = this.param.validateRule.rangeMsg || `数值不能大于 ${this.param.validateRule.max}`
          return false
        }
      }
      
      // 正则验证
      if (this.param.validateRule.regex && value) {
        try {
          const regex = new RegExp(this.param.validateRule.regex)
          if (!regex.test(value)) {
            this.error = this.param.validateRule.regexMsg || '格式不正确'
            return false
          }
        } catch (e) {
          console.error('正则表达式错误:', e)
        }
      }
      
      return true
    }
  }
}
</script>

<style scoped>
.parameter-field {
  margin-bottom: 15px;
}

.parameter-field.required .param-label {
  font-weight: 600;
}

.parameter-field.error .el-input,
.parameter-field.error .el-input-number {
  border-color: #f56c6c;
}

.param-label {
  display: block;
  margin-bottom: 6px;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.param-unit {
  color: #909399;
  font-size: 0.9em;
}

.required-mark {
  color: #f56c6c;
  margin-left: 2px;
}

.calculation-indicator {
  color: #409eff;
  cursor: help;
  font-size: 12px;
}

.calculated-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  color: #303133;
}

.value-display {
  font-weight: 500;
  font-size: 14px;
}

.error-message {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.param-info {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.info-item {
  color: #909399;
  font-size: 11px;
  background: #f4f4f5;
  padding: 1px 6px;
  border-radius: 2px;
}
</style>